<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>ginadmin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/utils.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a>
                    <cite>用户列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">

                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()">
                        <i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="addUser()">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-hide" id="userlisttable" lay-filter="userlisttable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div>
            <script type="text/html" id="delivery-table-operate">
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="changepwd">修改密码</a>
            </script>
        </div>
    </div>
</div>
</body>
<script>
    var table
    layui.use(['laydate', 'form', 'table'],
        function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
            table = layui.table;
            httpGetRequest("/web/user/list", {},function(res){
                randerTable(table,res.data);
            });

            table.on('tool(userlisttable)', function(obj){
                let event = obj.event;
                let itemdata = obj.data;//所在行的所有相关数据
                if(event == 'changepwd'){
                    changepwd(itemdata);
                }
            });

        });

    function addUser() {
        xadmin.open('添加用户','./user-add.html',800,600)
    }

    function changepwd(itemdata){
        console.log(itemdata)
        xadmin.open('修改密码','./userpwd-update.html?userid='+itemdata.ID,400,400)
    }

    function randerTable(table,data) {
        //展示已知数据
        table.render({
            elem: '#userlisttable'
            , cols: [[ //标题栏
                {type:'checkbox'}
                ,{field: 'ID', title: 'ID', width: 80, sort: true}
                , {field: 'Name', title: '用户名称', width: 120}
                , {field: 'UserName', title: '登录名称', minWidth: 150}
                , {field: 'Role', title: '角色名称', minWidth: 150}
                , {field: 'UpdatedAt', title: '更新时间', minWidth: 160,templet: "<div>{{layui.util.toDateString(d.UpdatedAt, 'yyyy-MM-dd HH:mm:ss')}}</div>" }
                , {title: '操作', toolbar: '#delivery-table-operate'}
            ]]
            ,data:data
            //,skin: 'line' //表格风格
            , even: true
            , page: true //是否显示分页
            , limits: [5, 7, 10]
            , limit: 10 //每页默认显示的数量
        });
    }

    function delAll (argument) {

        var data = table.checkStatus("userlisttable").data
        if(data.length == 0){
            layer.msg("请选择要删除的数据")
            return;
        }


        let deldata = '';
        data.forEach((e,index) => {
            deldata = deldata + e.ID;
            if(index != data.length - 1){
                deldata = deldata + ","
            }
        })
        console.log(deldata)
        layer.confirm('您确定要删除选中的'+data.length+'条数据吗?',function(index){
            httpRequest("/web/user/dels", {"users":deldata},function(res){
                layer.msg("删除成功",{
                    time:2000,
                    end:function () {
                        location.reload();
                    }
                })
            });
        });
    }


   </script>

</html>